<template>
  <div class="centerIntroduce">
    <Header></Header>

    <CarouselFigure></CarouselFigure>
    <!-- 菜单 -->
    <Menu></Menu>

    <!-- 中心概况 -->
    <div class="centerOverview">
      <!-- 三条线 -->
      <div class="line">
        <div class="firstLine"></div>
        <div class="secondLine"></div>
        <div class="thirdLine"></div>
      </div>
      <el-row>
        <el-col :lg="2" :md="2" :sm="2" :xs="4"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="10" :md="10" :sm="10" :xs="16">
          <span class="sectionTitle"
            >SAP(四川)产业赋能中心-{{ centerIntro.title }}</span
          >
        </el-col>
        <el-col :lg="12" :md="12" :sm="12" :xs="4"
          ><div style="opacity:0">1</div></el-col
        >
      </el-row>
      <el-row class="overviewBox">
        <el-col :lg="2" :md="2" :sm="2" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="7" :md="7" :sm="7" :xs="0" class="overviewContent">
          <p
            v-for="(item, index) in centerIntro.content"
            v-html="item"
            :key="index"
          ></p>
          <a href="#" class="learnMore" @click="learnCenterDetail">详情了解</a>
        </el-col>
        <el-col :lg="1" :md="1" :sm="1" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col
          :lg="11"
          :md="11"
          :sm="11"
          :xs="22"
          :push="1"
          class="overviewVideo"
        >
          <video
            width="100%"
            height="100%"
            object-fit: fill
            :src="centerIntro.videoLink"
            controls="controls"
          ></video>
        </el-col>

        <el-col :lg="0" :md="0" :sm="0" :xs="24" class="overviewContent">
          <p
            v-for="(item, index) in centerIntro.content"
            v-html="item"
            :key="index"
          ></p>
          <a href="#" class="learnMore" @click="learnCenterDetail">详情了解</a>
        </el-col>

        <el-col :lg="2" :md="2" :sm="2" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
      </el-row>
    </div>
   
   <!-- 赋能套餐、工作成效 -->
   <div class="centerOverview" v-for="(item,index) in centerIntroOther" :key="index">
	<!-- 三条线 -->
	<div class="line">
		<div class="firstLine"></div>
		<!-- <div class="secondLine"></div> -->
		<div class="thirdLine"></div>
	</div>
	<el-row>
		<el-col :lg="2" :md="2" :sm="2" :xs="4">
			<div style="opacity:0">1</div>
		</el-col>
		<el-col :lg="10" :md="10" :sm="10" :xs="16">
			<span class="sectionTitle">SAP(四川)产业赋能中心-{{ item.title }}</span>
		</el-col>
		<el-col :lg="12" :md="12" :sm="12" :xs="4">
			<div style="opacity:0">1</div>
		</el-col>
	</el-row>
	<el-row class="overviewBox">
		<el-col :lg="2" :md="2" :sm="2" :xs="0">
			<div style="opacity:0">1</div>
		</el-col>
		<el-col :lg="7" :md="7" :sm="7" :xs="0" class="overviewContent ">
			<p  v-html="item.content" class="overviewContentOther"></p>
		</el-col>
		<el-col :lg="1" :md="1" :sm="1" :xs="0">
			<div style="opacity:0">1</div>
		</el-col>
		<el-col :lg="11" :md="11" :sm="11" :xs="22" :push="1" class="overviewVideo">
      <img :src="item.videoLink" alt="">
			<!-- <video width="100%" height="100%" object-fit: fill :src="item.videoLink" controls="controls"></video> -->
		</el-col>
		<el-col :lg="0" :md="0" :sm="0" :xs="24" class="overviewContent">
				<p  v-html="item.content" class="overviewContentOther"></p>
		</el-col>
		<el-col :lg="2" :md="2" :sm="2" :xs="0">
			<div style="opacity:0">1</div>
		</el-col>
	</el-row>
</div>


    <!-- 专家介绍 -->
    <div class="expertsInfo">
      <el-row>
        <el-col :lg="2" :md="2" :sm="2" :xs="4"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="10" :md="10" :sm="10" :xs="16">
          <span class="sectionTitle">SAP(四川)产业赋能中心-专家介绍</span>
        </el-col>
        <el-col :lg="9" :md="9" :sm="9" :xs="4"
          ><div style="opacity: 0;">1</div></el-col
        >
        <el-col :lg="3" :md="3" :sm="3" :xs="0"
          ><span class="seeMoreInfo" @click="expertsMore"
            >查看更多</span
          ></el-col
        >
      </el-row>

      <el-row>
        <el-col :span="2"><div style="opacity:0">1</div></el-col>
        <el-col :span="20" class="expertsAll">
          <ExpertInfoItem
            v-for="(item, index) in allExperts"
            :key="index"
            :class="{ isShow: index > 7 }"
            class="expertInfoItem"
            :expertInfo="item"
          ></ExpertInfoItem>
        </el-col>
        <el-col :span="2"><div style="opacity:0">1</div></el-col>
      </el-row>
      <div class="sm-see-more" @click="expertsMore">查看更多</div>
    </div>

    <!-- 合作伙伴 -->
    <div class="partners">
      <div class="partnersTitle">合作伙伴</div>
      <div class="partnerLine"></div>
      <el-row>
        <el-col :lg="4" :md="3" :sm="2" :xs="2"
          ><div style="opacity:0">11</div></el-col
        >
        <el-col :lg="16" :md="18" :sm="20" :xs="20" class="partnerBox">
          <div class="partnerItem" v-for="(item, index) in allLogos" :key="index">
             <img
              :src='item.logoUrl'
              alt="logo"
            />
          </div>
        </el-col>
        <el-col :lg="4" :md="3" :sm="2" :xs="2"
          ><div style="opacity:0">11</div></el-col
        >
      </el-row>
    </div>

    <!-- 领导关怀 -->
    <div class="leaderCare">
      <el-row>
        <el-col :lg="2" :md="2" :sm="2" :xs="4"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="10" :md="10" :sm="10" :xs="16">
          <span class="sectionTitle">SAP(四川)产业赋能中心-领导关怀</span>
        </el-col>
        <el-col :lg="9" :md="9" :sm="9" :xs="4"
          ><div style="opacity: 0;">1</div></el-col
        >
        <el-col :lg="3" :md="3" :sm="3" :xs="0"
          ><span class="seeMoreInfo" @click="leaderCareMore"
            >查看更多</span
          ></el-col
        >
      </el-row>

      <el-row>
        <el-col :span="2"><div style="opacity:0">1</div></el-col>
        <el-col :span="20">
          <div class="leaderCareAll">
            <LeaderCareItem
              v-for="(item, index) in allArticle"
              :key="index"
              :class="{ isShow: index >2}"
              class="leaderCareItem"
              :leader="item"
            ></LeaderCareItem>
          </div>
          <div class="progressLine">
            <!-- <div class="progressBlue"></div> -->
          </div>
        </el-col>
        <el-col :span="2"><div style="opacity: 0;">1</div></el-col>
      </el-row>
      <div class="sm-see-more" @click="leaderCareMore">查看更多</div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
// 组件
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import CarouselFigure from "@/components/CarouselFigure.vue";
import LeaderCareItem from "@/components/centerHome/LeaderCareItem.vue";
import ExpertInfoItem from "@/components/centerHome/ExpertInfoItem.vue";
import Menu from '../../components/Menu.vue'

// 请求
import { ReqAllExperts, ReqCenterIntro,ReqLogo,ReqArticle} from "../../request/index";

export default {
  data() {
    return {
      centerIntro: {},
      allExperts: [],
      allLogos:[],
      allArticle:[],
      centerIntroOther:[]
    };
  },
  components: {
    Header,
    Footer,
    CarouselFigure,
    LeaderCareItem,
    ExpertInfoItem,
    Menu
  },
  methods: {
    // 获取中心介绍
    async getCenterIntro() {
      let centerIntro = await ReqCenterIntro(1);
      this.centerIntro = centerIntro.page[0];
      centerIntro.page.shift();
      this.centerIntroOther = centerIntro.page
      let resPara = this.centerIntro.content.split("\n");
      let newParaList = [];
      resPara.forEach((item) => {
        if (item.length !== 0) {
          newParaList.push(item);
        }
      });
      this.centerIntro.content = newParaList;
    },
    // 获取全部专家
    async getAllExperts() {
      let allExperts = await ReqAllExperts();
      this.allExperts = allExperts.page.list;
    },
    // 专家查看更多
    expertsMore() {
      this.$router.push("/centerHome/expertIntro");
    },
    // 了解详情
    learnCenterDetail() {
      this.$router.push("/centerHome/centerDetails");
    },
    // 领导关怀
    leaderCareMore() {
      this.$router.push("/centerHome/leaderCare");
    },
    // 获取企业logo
    async getLogo(){
      let res = await ReqLogo();
      this.allLogos = res.list
    },
    // 获取领导关怀文章
    async getArticle(){
      let data={
        limit:3,
        page:1,
        type:3
      }
      let res =await ReqArticle();
      this.allArticle = res.page.list;
    }
  },
  async created() {
    await this.getAllExperts();
    await this.getCenterIntro();
    await this.getLogo();
    await this.getArticle()
  },
};
</script>

<style scoped>
@import url("~assets/styles/centerHome/centerIntroduce.css");
.isShow {
  display: none;
}
</style>
